<template>
  <el-dialog
    :title="titleText"
    :visible="addDialogVisible"
    width="800px"
    @close="btnCancel"
  >
    <el-form :model="form" ref="form" label-width="120">
      <el-form-item label="文章标题：" required prop="title">
        <el-input
          v-model="form.title"
          autocomplete="off"
          style="width: 667px"
        />
      </el-form-item>
      <el-form-item label="文章内容：" required prop="articleBody">
        <!-- 富文本插件 -->
        <quill-editor
          class="myQuillEditor"
          ref="myQuillEditor"
          v-model="form.articleBody"
          :options="editorOption"
        />
      </el-form-item>
      <el-form-item label="视频地址：" prop="videoURL" style="margin-left: 7px">
        <el-input
          v-model="form.videoURL"
          autocomplete="off"
          placeholder="请输入视频地址"
          style="width: 667px"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right">
      <el-button @click="btnCancel">取 消</el-button>
      <el-button type="primary" @click="btnOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  // [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  ["image", 'link'] // 链接、图片、视频-----['link', 'image', 'video']
]
import { add, update } from '@/api/hmmm/articles.js'
export default ({
  components: {
    quillEditor
  },
  props: {
    addDialogVisible: {
      type: Boolean,
      default: false
    },
    forms: {
      type: Object,
      default: () => { },
    }
  },
  data () {
    return {
      form: {},
      editorOption: {
        //  富文本编辑器配置
        modules: {
          //工具栏定义的
          toolbar: toolbarOptions
        },
        //主题
        theme: "snow",
        placeholder: "请输入正文"
      }
    }
  },
  computed: {
    titleText () {
      return this.form.id ? '修改文章' : '新增文章'
    }
  },
  updated () {
    if (this.forms.id) {
      this.form = this.forms
      console.log(this.form);
    }
  },
  methods: {
    btnCancel () {
      this.$refs.form.resetFields()
      this.$emit('update:addDialogVisible', false)
    },
    async btnOk () {
      if (this.form.id) {
        await update(this.form)
      } else {
        await add(this.form)
      }
      this.$emit('updateArticle')
      this.btnCancel()
      this.$message.success('操作成功')
    }
  }

})
</script>

<style scoped lang="scss">
::v-deep .myQuillEditor {
  margin-left: 90px;
  height: 235px;
  width: 667px;
  margin-bottom: 50px;
}
</style>
